// 修改密码弹窗

import { handleResetPasswordNT } from '@/services/login';
import { Button, Col, Form, Input, Modal, Row, message } from 'antd';
import { useIntl } from 'umi';

import lock from '@/assets/lock.png';
import { handleEvent } from '@/services/center';
type Props = {
  visible: boolean;
  handleCancel: () => void;
  handleOk: () => void;
  tag?: string;
};
const ChangePassWordModal: React.FC<Props> = ({ visible, handleCancel, handleOk, tag }) => {
  const intl = useIntl();

  return (
    <Modal zIndex={9999} footer={false} width={500} closeIcon={null} open={visible} destroyOnClose>
      <div style={{ fontSize: 24, fontWeight: 700, marginBottom: 32 }}>
        {intl.formatMessage({ id: 'app.order.change_password' })}
      </div>
      <Form
        onFinish={async (values: {
          newPassword: string;
          oldPassword: string;
          password_confirmation: string;
        }) => {
          const { newPassword, oldPassword } = values;
          const { code, message: msg } = await handleResetPasswordNT({
            newPassword,
            oldPassword,
          });
          if (code == '100200') {
            message.success(msg);
            handleOk();
            if (tag) handleEvent(tag);
          }
        }}
        labelCol={{ span: 0 }}
      >
        <Form.Item
          rules={[{ required: true }]}
          label={intl.formatMessage({ id: 'app.login.old_password' })}
          name="oldPassword"
        >
          <Input.Password
            variant="filled"
            prefix={<img src={lock} width={20} />}
            style={{ height: 60 }}
            autoComplete="new-password"
            placeholder={intl.formatMessage({ id: 'app.login.old_password' })}
          />
        </Form.Item>
        <Form.Item
          rules={[{ required: true }]}
          label={intl.formatMessage({ id: 'app.login.new_password' })}
          name="newPassword"
        >
          <Input.Password
            variant="filled"
            prefix={<img src={lock} width={20} />}
            style={{ height: 60 }}
            autoComplete="new-password"
            placeholder={intl.formatMessage({ id: 'app.login.new_password' })}
          />
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, curValues) => prevValues.newPassword !== curValues.newPassword}
        >
          {({ getFieldValue }) => {
            const newPassword = getFieldValue('newPassword');
            return (
              <Form.Item
                rules={[
                  { required: true },
                  {
                    validator: (_, value) =>
                      new Promise<void>((resolve, reject) => {
                        if (newPassword === value) {
                          resolve();
                        } else {
                          reject(
                            new Error(
                              intl.formatMessage({ id: 'app.configuration.password_same' }),
                            ),
                          );
                        }
                      }),
                  },
                ]}
                label={intl.formatMessage({ id: 'validation.confirm-password.required' })}
                name="password_confirmation"
              >
                <Input.Password
                  variant="filled"
                  prefix={<img src={lock} width={20} />}
                  style={{ height: 60 }}
                  autoComplete="new-password"
                  placeholder={intl.formatMessage({ id: 'validation.confirm-password.required' })}
                />
              </Form.Item>
            );
          }}
        </Form.Item>
        <Row gutter={[24, 0]} style={{ marginTop: 40 }}>
          <Col span={12}>
            <Button onClick={handleCancel} className="cancel_btn">
              {intl.formatMessage({ id: 'home.cancel' })}
            </Button>
          </Col>
          <Col span={12}>
            <Form.Item style={{ marginBottom: 0 }}>
              <Button htmlType="submit" style={{ width: '100%', height: '60px' }} type="primary">
                {intl.formatMessage({ id: 'home.save' })}
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default ChangePassWordModal;
